<!--  -->
<template>
    <div class="login_menu">
        <el-form :model="login_info" :rules="rules" class="login_form" label-width="auto" style="max-width: 600px">
            <div>
                <p align="center" style="font-size:25px">CRM管理系统</p>
            </div>
            <div class="login_input">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="login_info.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="login_info.password" placeholder="请输入密码" type="password" />
                </el-form-item>
            </div>
            <el-form-item class="login_button">
                <el-button type="primary" @click="onSubmit" style="width: 150px;">确认</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script lang="ts" setup>
import axios from "axios";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { useRouter } from 'vue-router';

const api = {
    login_list: "/api/login"
};

const router = useRouter();

const login_info = reactive({
    username: '',
    password: ''
});

const rules = {
    username: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 1, max: 20, message: "用户名必须在1-20个字符内", trigger: "blur" }
    ],
    password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 1, max: 20, message: "密码必须在1-20个字符内", trigger: "blur" }
    ]
};

const onSubmit = async () => {
    const result = await axios.post(api.login_list, login_info);
    console.log(result);
    if (result.data.code == 0) {
        ElMessage.success("登录成功！欢迎您 "+result.data.data.staff_name);
        router.push('/home');
    } else {
        ElMessage.error(result.data.message);
    }
};
</script>


<style scoped>
    .login_menu{
        display: flex;
        min-width: 1226px;
        height:100vh;
        width:100%;
        background-image: url("../assets/img/world.png");
        overflow: hidden;
        background-repeat: no-repeat;
    }
    .login_form{
        position: relative;
        background-color: #ffffff;
        height: 300px;
        width: 400px;
        top:30%;
        left:36%;
        padding: 50px;
        border-radius: 10%;
        opacity: 90%;
    }
    .login_button{
        display: absolute;
        left:auto;
        margin: 20px;
        padding-left: 60px;
    
    }
    .login_input{
        margin-top:20px;
    }
</style>

